<template>
  <div class="pad-20 bgc-default">
    <div class="pad-20 bg-color-white">
      <div>
        <label class="font-14 pad-l-5">供货联盟状态：</label>
        <el-radio-group v-model="isSubmitClick" @change="isSubmitAction">
          <el-radio-button label="1">已上架</el-radio-button>
          <el-radio-button label="2">已下架</el-radio-button>
          <el-radio-button label="3">已失效</el-radio-button>
        </el-radio-group>
      </div>
      <!--顶部搜索 -->
      <div class="top-operate-default flex-col mar-t-20 mar-b-10" style="align-items: baseline; height: 100%; ">
        <div class="search-item mar-t-20">
          <el-select v-model="searchListQuery.searchKeyWordType" style="width: 120px;">
            <el-option label="商品名称" value="1"></el-option>
            <el-option label="商品货号" value="2"></el-option>
            <el-option label="商品条码" value="3"></el-option>
          </el-select>
          <el-input v-model="searchListQuery.searchKeyWord" @keyup.enter.native="handleSearch" placeholder="请输入搜索内容"
            clearable size="small" style="width: 240px" />
          <el-select v-model="searchListQuery.goodsStatus" class="special-input classificationWidth mar-l-20"
            placeholder="选择企业上下架状态">
            <el-option v-for="item in goodsStatusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="searchListQuery.supplyAllianceSellPriceType" class="special-input mar-l-20" placeholder="选择零售价模式">
            <el-option v-for="item in supplyAllianceSellPriceTypeList" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="searchListQuery.supplyAllianceUpdateType"
            class="special-input classificationWidth mar-l-20" placeholder="选择联盟商品更新类型">
            <el-option v-for="item in supplyAllianceUpdateTypeList" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <el-select v-model="searchListQuery.supplyAllianceWholesalePriceType" class="special-input mar-l-20"
            placeholder="选择批发价模式">
            <el-option v-for="item in supplyAllianceWholesalePriceTypeList" :key="item.value" :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="search-item mar-t-20 mar-b-20">
          <label class="font-14">选择商品分类：</label>
          <el-cascader v-model="categoryIds" :props="{ checkStrictly: true }" change-on-select placeholder="选择商品分类"
            :options="categoryData" class="special-input" clearable></el-cascader>
          <el-button-group class="mar-l-20">
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button plain @click="resetSearch">重置</el-button>
          </el-button-group>
        </div>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table ref="multipleTable" :data="goodsList" @selection-change="handleSelectionChange"
          v-loading="listLoading" element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
          row-class-name="default-row">
          <el-table-column width="50px" type="selection" fixed="left"></el-table-column>
          <el-table-column width="320px" label="商品" fixed="left">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p mar-r-30">
                <label><img :src="scope.row.mainImage" class="user-avatar cursor-p"></label>
                <div class="font-14 pad-l-10 v-align-h height-65">
                  <div class="goods-title">
                    <div class="line-2">
                      <template v-if="scope.row.categoryName">
                        <el-tag size="mini" v-if="scope.row.skuFlag == 1" type="danger" effect="light">多</el-tag>
                      </template>
                      <template v-if="scope.row.crossBorderType === 2">
                        <el-tag size="mini" type="danger" effect="light">保</el-tag>
                      </template>
                      <template
                        v-if="enterpriseConfig.anchorSelectionAuthority == '1' && scope.row.selectionGoodsType == '1'">
                        <el-tag size="mini" class="anchor-tag" type="danger" effect="light">选</el-tag>
                      </template>
                      {{scope.row.title}}
                    </div>
                  </div>
                  <template v-if="scope.row.categoryName">
                    <span class="font-color-6 font-13">[{{scope.row.categoryName}}]</span>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() != 3" align="center" label="联盟供货价">
            <template slot-scope="scope">
              <span v-if="scope.row.supplyAlliancePrice">
                <span v-if="scope.row.skuFlag === 0"> ￥{{scope.row.supplyAlliancePrice}} </span>
                <span v-else>
                  <span v-if="scope.row.supplyAlliancePrice  === scope.row.supplyAllianceMaxPrice">
                    ￥{{scope.row.supplyAlliancePrice}} </span>
                  <span v-else>
                    ￥{{scope.row.supplyAlliancePrice}}--{{scope.row.supplyAllianceMaxPrice}}
                  </span>
                </span>
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column min-width="120px" v-if="getVersionType() != 3" align="center" label="建议零售价">
            <template slot-scope="scope">
              <div v-if="scope.row.supplyAllianceSellPriceTypeName">
                <span>{{scope.row.supplyAllianceSellPriceTypeName}}</span>
              </div>
              <div v-else>
                <span>未设置</span>
              </div>
              <span v-if="scope.row.supplyAllianceSellMinPrice">
                <span v-if="scope.row.skuFlag === 0"> ￥{{scope.row.supplyAllianceSellMinPrice}} </span>
                <span v-else>
                  <span v-if="scope.row.supplyAllianceSellMinPrice  === scope.row.supplyAllianceSellMaxPrice">
                    ￥{{scope.row.supplyAllianceSellMinPrice}} </span>
                  <span v-else>
                    ￥{{scope.row.supplyAllianceSellMinPrice}}--{{scope.row.supplyAllianceSellMaxPrice}}
                  </span>
                </span>
              </span>
              <span v-else>--</span>
            </template>
          </el-table-column>
          <el-table-column min-width="120px" v-if="getVersionType() != 3" align="center" label="建议批发价">
            <template slot-scope="scope">
              <div v-if="scope.row.supplyAllianceIsEnableWholesaleModel === 1">
                <div v-if="scope.row.supplyAllianceWholesalePriceTypeName">
                  <span>{{scope.row.supplyAllianceWholesalePriceTypeName}}</span>
                </div>
                <div v-else>
                  <span>未设置</span>
                </div>
                <span v-if="scope.row.supplyAllianceMinWholesalePrice">
                  <span v-if="scope.row.supplyAllianceMinWholesalePrice  === scope.row.supplyAllianceMaxWholesalePrice">
                    ￥{{scope.row.supplyAllianceMinWholesalePrice}}
                  </span>
                  <span v-else>
                    <span v-if="scope.row.supplyAllianceMaxWholesalePrice !== null">
                      ￥{{scope.row.supplyAllianceMinWholesalePrice}}--{{scope.row.supplyAllianceMaxWholesalePrice}}
                    </span>
                  </span>
                </span>
                <span v-else>--</span>
              </div>
              <div v-else>
                <span>未设置</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column min-width="120px" v-if="getVersionType() != 2 && getVersionType() != 3" align="center"
            label="零售价">
            <template slot-scope="scope">
              <template v-if="scope.row.minPrice">
                <span>￥{{scope.row.minPrice}}</span>
                <span
                  v-if="scope.row.maxPrice != null && scope.row.minPrice !== scope.row.maxPrice">--￥{{scope.row.maxPrice}}</span>
              </template>
              <template v-else>
                <span>还未设置零售价</span>
              </template>
            </template>
          </el-table-column>
          <el-table-column v-if="getVersionType() != 2 && getVersionType() != 3" align="center" label="联盟商品/更新类型"
            :render-header="renderheader">
            <template slot-scope="scope">
              <span v-if="scope.row.supplyAllianceUpdateType === 0">无更新</span>
              <span v-if="scope.row.supplyAllianceUpdateType === 1" style="color: #ff0000">基本信息已更新</span>
              <span v-if="scope.row.supplyAllianceUpdateType === 2" style="color: #ff0000">价格已更新</span>
            </template>
          </el-table-column>
          <el-table-column label="库存/销量" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.stock}}</span>
              <span>件/</span>
              <span> {{scope.row.salesNum}}</span>
              <span>件</span>
            </template>
          </el-table-column>
          <el-table-column label="企业上下架状态" align="center">
            <template slot-scope="scope">
              <template v-if="scope.row.stock == 0">
                已售空
              </template>
              <template v-else>
                <template v-if="scope.row.goodsStatusRemark">
                  <el-tooltip class="item" effect="dark" :content="scope.row.goodsStatusRemark" placement="top-start">
                    <span style="color: #2d8cf0">{{ dict.upDwonStatusFlag[scope.row.goodsStatus]}}</span>
                  </el-tooltip>
                </template>
                <template v-else>
                  {{ dict.upDwonStatusFlag[scope.row.goodsStatus]}}
                </template>
              </template>
            </template>
          </el-table-column>
          <el-table-column min-width="160px" label="操作" fixed="right" align="right">
            <template slot-scope="scope">
              <template v-if="isSubmitClick === '1' ">
                <el-button v-if="scope.row.goodsStatus === 0" type="text" size="medium" @click="handleUp(scope.row)">上架
                </el-button>
                <el-button v-if="scope.row.goodsStatus === 1" type="text" size="medium" @click="handleDown(scope.row)">
                  下架</el-button>
              </template>
              <el-button v-if="isSubmitClick !== '3'" type="text" size="medium" @click="handleEdit(scope.row)">编辑
              </el-button>
              <el-button v-if="isSubmitClick !== '3' && scope.row.supplyAllianceUpdateType !== 0" type="text"
                size="medium" @click="clearUpdateType(scope.row)">
                清空更新类型</el-button>
              <el-button type="text" size="medium" @click="handleDelete(scope.row)">删除</el-button>
            </template>

          </el-table-column>
        </el-table>
      </div>
      <!-- 列表分页 -->
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <div>

    </div>
  </div>
</template>

<script>
  import {
    upGoods,
    downGoods,
    deleteGoods,
    listGoodsCategory
  } from '@/api/goods/goods'
  import {
    listBrand
  } from '@/api/user/enterpriseBrand'
  import {
    getDictByGroupName
  } from '@/api/common/common'
  import goodsSelect from '../../components/goods-select'
  import elDragDialog from '@/directive/el-dragDialog'
  import {
    getToken
  } from '@/utils/auth'
  import {
    getByEnterpriseId
  } from '@/api/user/enterprise'
  import {
    pagingSupplyAllianceGoodsList,
    updateClearSupplyAllianceGoodsType
  } from '@/api/goods/supplyAlliance'
  import {
    getProjectCategoryTree
  } from '@/api/project/projectGoodsCategory'
  export default {
    components: {
      goodsSelect
    },
    directives: {
      elDragDialog
    },
    data() {
      return {
        goodsStatusOptions: [{
          value: '1',
          label: '已上架'
        }, {
          value: '0',
          label: '已下架'
        }],
        isSubmitClick: '1',
        supplyAllianceSellPriceTypeList: [{
          value: '1',
          label: '限定零售价范围'
        }, {
          value: '2',
          label: '限定零售价'
        }, {
          value: '3',
          label: '不限定零售价'
        }],
        supplyAllianceWholesalePriceTypeList: [{
          value: '1',
          label: '限定批发价范围'
        }, {
          value: '2',
          label: '限定批发价'
        }, {
          value: '3',
          label: '不限定批发价'
        }],
        supplyAllianceUpdateTypeList: [{
          value: '0',
          label: '无更新'
        }, {
          value: '3',
          label: '所有更新类型'
        }, {
          value: '1',
          label: '基本信息已更新'
        }, {
          value: '2',
          label: '价格参数已更新'
        }],
        selectSellPriceType: '1',
        selectSellPriceTypeTitle: '零售价范围',
        total: null,
        multipleSelection: [],
        listLoading: true,
        supplierList: [],
        listBrands: [],
        brandId: '',
        supplierType: '',
        searchListQuery: {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          searchKeyWordType: '1',
          currentPage: 1,
          size: 10,
          distributionType: null,
          supplierType: null,
          selectionGoodsType: '',
          title: '',
          comboType: '1',
          supplyAllianceStatusList: '1',
          supplyAllianceSellPriceType: '',
          supplyAllianceUpdateType: '',
          supplyAllianceWholesalePriceType: '',
          categoryId: '',
          goodsStatus: ''
        },
        enterpriseConfig: {
          wholesaleAuthority: 0
        },
        supplierId: '',
        searchLabelType: '',
        dict: {
          upDwonStatusFlag: {}
        },
        isDict: false,
        categoryIds: [],
        goodsList: [],
        // 供货联盟商品的所有分类json
        supplyAllianceCategoryData: [],
        // 当前企业商品的所有分类json
        categoryData: [],
        allChecked: false,
        uploadParams: '',
        rules: {
          supplyAlliancePrice: [{
            required: true,
            message: '请填写联盟供货价',
            trigger: 'blur'
          }],
          supplyAllianceSellPriceType: [{
            required: true,
            message: '请填写零售价范围',
            trigger: 'blur'
          }],
          supplyAlliancePriceRange: [{
            required: true,
            message: '请填写零售价范围',
            trigger: 'blur'
          }],
          supplyAlliancePriceLimit: [{
            required: true,
            message: '请填写限定零售价',
            trigger: 'blur'
          }],
          supplyAllianceDescribe: [{
            required: true,
            message: '请填写商品推介',
            trigger: 'blur'
          }],
          supplyAllianceCategoryId: [{
            required: true,
            message: '请选择商品分类',
            trigger: 'change'
          }]
        }

      }
    },
    // 初始化页面
    created() {
      this.uploadParams = {
        accessToken: getToken(),
        enterpriseId: this.getEnterpriseId(),
        goodsType: 30
      }
      const queryParams = this.getCurrentPage().query
      if (queryParams && queryParams.supplierId) {
        this.supplierId = queryParams.supplierId
      }
      if (queryParams && queryParams.currentPage) {
        this.searchListQuery.currentPage = queryParams.currentPage * 1
      }
      this.listBrand()
      this.initEnterpriseConfig()
      this.initDict()
      this.listGoodsCategory()
      this.listSupplyAllianceGoodsCategory()
      this.initGoodsList()
    },
    filters: {
      priceFilter(e) {
        return e.toFixed(2)
      }
    },
    mounted() {},
    methods: {
      listBrand() {
        listBrand(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.listBrands = response.data
        })
      },
      initEnterpriseConfig() {
        getByEnterpriseId(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.enterpriseConfig = response.data
        })
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initGoodsList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initGoodsList()
      },
      // 勾选
      handleSelectionChange(val) {
        this.multipleSelection = val
        if (this.multipleSelection.length === this.goodsList.length) {
          this.allChecked = true
        } else {
          this.allChecked = false
        }
      },
      initDict() {
        getDictByGroupName('ProjectGoodsDTO').then(response => {
          this.dict = response.data
        })
      },
      setSearchListQuery() {
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: this.searchListQuery.currentPage,
          size: this.searchListQuery.size,
          distributionType: this.searchListQuery.distributionType,
          supplierType: null,
          selectionGoodsType: this.searchListQuery.selectionGoodsType,
          searchKeyWordType: this.searchListQuery.searchKeyWordType,
          searchKeyWord: this.searchListQuery.searchKeyWord,
          goodsStatus: this.searchListQuery.goodsStatus,
          supplyAllianceStatusList: this.searchListQuery.supplyAllianceStatusList,
          supplyAllianceSellPriceType: this.searchListQuery.supplyAllianceSellPriceType,
          supplyAllianceUpdateType: this.searchListQuery.supplyAllianceUpdateType,
          supplyAllianceWholesalePriceType: this.searchListQuery.supplyAllianceWholesalePriceType
        }

        this.searchListQuery['goodsSource'] = '3'
        if (this.categoryIds != null) {
          this.searchListQuery['categoryId'] = this.categoryIds[this.categoryIds.length - 1]
        }
      },
      initGoodsList() {
        this.setSearchListQuery()
        this.listLoading = true
        pagingSupplyAllianceGoodsList(this.searchListQuery).then((response) => {
          if (response.isError) return
          this.listLoading = false
          this.total = response.total
          this.goodsList = response.records
        })
      },
      // 获取企业商品类目
      listGoodsCategory() {
        const enterpriseId = this.getEnterpriseId()
        listGoodsCategory(enterpriseId).then(response => {
          this.categoryData = response.data
        })
      },
      // 获取供货联盟商品类目
      listSupplyAllianceGoodsCategory() {
        getProjectCategoryTree().then(response => {
          this.supplyAllianceCategoryData = response.data
        })
      },
      // 未提交、已提交
      isSubmitAction(data) {
        if (data === '1') {
          this.searchListQuery.supplyAllianceStatusList = '1'
        } else if (data === '2') {
          this.searchListQuery.supplyAllianceStatusList = '2'
        } else if (data === '3') {
          this.searchListQuery.supplyAllianceStatusList = '3'
        }
        this.handleSearch()
      },

      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.initGoodsList()
      },
      resetSearch() {
        this.searchKeyword = ''
        this.searchLabelType = ''
        this.supplierType = ''
        this.categoryIds = []
        this.brandId = ''
        this.searchListQuery = {
          enterpriseId: this.getEnterpriseId(),
          supplierId: '',
          currentPage: 1,
          size: 10,
          distributionType: null,
          goodsSource: '3',
          supplierType: '',
          selectionGoodsType: '',
          title: '',
          searchKeyword: '',
          searchKeyWordType: '1',
          searchLabelType: '',
          supplyAllianceStatusList: this.searchListQuery.supplyAllianceStatusList,
          supplyAllianceSellPriceType: '',
          supplyAllianceUpdateType: '',
          supplyAllianceWholesalePriceType: ''
        }
        this.initGoodsList()
      },
      // 上架
      handleUp(row) {
        if (row.stock === 0) {
          this.$message({
            type: 'warning',
            message: '库存为0无法上架'
          })
          return
        }
        if (row.supplyAllianceUpdateType !== 0) {
          this.$confirm('商品信息已更新，是否确认上架？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const goodsId = row.goodsId
            upGoods(goodsId, 30).then(response => {
              if (response.isError) return
              this.$message({
                message: '上架成功',
                type: 'success'
              })
              this.initGoodsList()
            })
          })
        } else {
          const goodsId = row.goodsId
          upGoods(goodsId, 30).then(response => {
            if (response.isError) return
            this.$message({
              message: '上架成功',
              type: 'success'
            })
            this.initGoodsList()
          })
        }
      },
      // 下架
      handleDown(row) {
        const goodsId = row.goodsId
        downGoods(goodsId, 30)
          .then(response => {
            if (response.isError) return
            this.$message({
              message: '下架成功',
              type: 'success'
            })
            this.initGoodsList()
          })
      },
      // 清空更新类型
      clearUpdateType(row) {
        const goodsId = row.goodsId
        updateClearSupplyAllianceGoodsType(goodsId, 30)
          .then(response => {
            if (response.isError) return
            this.$message({
              message: '清空更新类型成功',
              type: 'success'
            })
            this.initGoodsList()
          })
      },
      // 编辑
      handleEdit(row) {
        const routeData = this.$router.resolve({
          path: '/goods/edit/index',
          query: {
            goodsId: row.goodsId,
            fromListPage: '30'
          }
        })
        const newWindow = window.open(routeData.href, row.goodsId)
        newWindow.onload = () => (newWindow.document.title = row.title)
      },
      // 删除
      handleDelete(row) {
        this.$confirm('此操作将删除该商品，是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const goodsId = row.goodsId
          deleteGoods(goodsId, 30).then(response => {
            if (response.isError) return
            this.initGoodsList()
          })
        })
      },
      changeSellPriceType(type) {
        if (type === '1') {
          this.selectSellPriceTypeTitle = '零售价范围：'
        } else if (type === '2') {
          this.selectSellPriceTypeTitle = '限定零售价：'
        } else if (type === '3') {
          this.selectSellPriceTypeTitle = '建议零售价：'
        }
      },
      renderheader(h, {
        column,
        $index
      }) {
        return h('span', {}, [
          h('span', {}, column.label.split('/')[0]),
          h('br'),
          h('span', {}, column.label.split('/')[1])
        ])
      }
    }
  }
</script>
<style lang="less" scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .btn-search {
    height: 60px;
    display: flex;
    align-items: center;
  }

  .v-align-h {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
  }

  .user-avatar {
    width: 65px;
    height: 65px;
    display: block;
    padding: 1px;
    // border: #efefef 1px solid;
  }

  .goods-title {
    color: #155bd4;
    line-height: 1.2;
  }

  .gray-bar {
    background: #e4e4e4;
    padding: 20px;
    margin-bottom: 20px;
    width: 80%;
  }

  .tips {
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }

  .special-input {
    /deep/ .el-input {
      width: 150px;
    }
  }

  // 2行文字展示
  .line-2 {
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
  }

  .anchor-tag {
    color: #008425;
    background-color: #E3FFEB;
    border-color: #0084251a;
  }

  .w-195 {
    width: 245px;
  }

  .w-430 {
    width: 560px;
  }

  .categoryWidth {
    /deep/.el-input {
      width: 560px;
    }
  }

  .classificationWidth {
    /deep/.el-input {
      width: 200px;
    }
  }
</style>
